<template>
        <el-row>
            <el-col :span="1">
            </el-col>
            <el-col :span="10">
                <el-page-header @back="goBack">
                    <template #content>
                        <span class="text-large font-600 mr-3"> {{ input }}</span>
                        <el-text type="success">{{ state.tradeCode }} </el-text>
                        <el-text type="success"> {{ state.industry }} </el-text>
                    </template>
                </el-page-header>
            </el-col>
            <el-col :span="10">
                <industry-tag :tags="state.tags" />
            </el-col>

            <el-button @click="visible = true">简介</el-button>
            <el-drawer v-model="visible" :show-close="false">
                <template #header="{ close, titleId, titleClass }">
                    <h4 :id="titleId" :class="titleClass">{{ state.controllingShareHolder }}</h4>
                    <el-button type="danger" @click="close">
                        <el-icon class="el-icon--left">
                            <CircleCloseFilled />
                        </el-icon>
                        Close
                    </el-button>
                </template>
                {{ state.introduce }}
            </el-drawer>

        </el-row>

        <el-row>
            <el-col :span="1">
            </el-col>
            <el-col :span="23" v-if="state.category ==='股票'">
                <el-text type="primary">wg： {{ state.wg }} </el-text>
                <el-text type="primary">市值： {{ state.marketCap }} 亿</el-text>
                <el-text type="primary">市盈率TTM：{{ state.peRatio }} </el-text>
                <el-text type="primary">PB：{{ state.pbRatio }} </el-text>
                <el-text type="primary">股息率：{{ state.shareRate.toFixed(2) }}%</el-text>
                <el-text type="primary">派现融资比：{{ state.dividendPayoutRatio }}% </el-text>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-change="change">
                    <el-tab-pane label="按周统计" name="week_stock_detail">
                        <week-stock-detail v-if="activeName === 'week_stock_detail'"></week-stock-detail>
                    </el-tab-pane>

                    <el-tab-pane label="按月统计" name="month_stock_detail">
                        <month-stock-detail v-if="activeName ==='month_stock_detail'"></month-stock-detail>
                    </el-tab-pane>

                    <el-tab-pane label="按年统计" name="year_stock_detail">
                        <year-stock-detail v-if="activeName ==='year_stock_detail'"
                        :stock-category="state.category"
                        ></year-stock-detail>
                    </el-tab-pane>

                    <el-tab-pane label="日线" name="trading_rank">
                        <trading-rank v-if="activeName ==='trading_rank'"></trading-rank>
                    </el-tab-pane>

                    <el-tab-pane label="连续下跌" name="Consecutive">
                        <StockConsecutiveView v-if="activeName ==='Consecutive'"></StockConsecutiveView>
                    </el-tab-pane>

                    <el-tab-pane label="GB记录" name="gb_sta">
                        <WeekStockGBSta v-if="activeName === 'gb_sta'"></WeekStockGBSta>
                    </el-tab-pane>

                    <el-tab-pane label="均线" name="mean_line">
                        <mean-line-view v-if="activeName ==='mean_line'"></mean-line-view>
                    </el-tab-pane>

                    <el-tab-pane v-if="state.category ==='股票'" label="北向持仓比率" name="north_bound_ratio_echart">
                        <north-bound-ratio-echart v-if="activeName ==='north_bound_ratio_echart'"></north-bound-ratio-echart>
                    </el-tab-pane>

                    <el-tab-pane v-if="state.category ==='股票'" label="PE & PB" name="pe_pb_echart">
                        <pe-and-pb-echart v-if="activeName ==='pe_pb_echart'"></pe-and-pb-echart>
                    </el-tab-pane>

                    <el-tab-pane v-if="state.category ==='股票'" label="财务数据" name="finance_stat">
                        <finance-stat v-if="activeName ==='finance_stat'"></finance-stat>
                    </el-tab-pane>

                    <el-tab-pane v-if="state.category ==='ETF'" label="基金份额" name="fund_units">
                        <fund-units-echart v-if="activeName ==='fund_units'"></fund-units-echart>
                    </el-tab-pane>

                    <el-tab-pane v-if="state.category ==='股票'" label="持仓基金" name="StockEtfConstruct">
                        <EtfStockConstruct v-if="activeName ==='StockEtfConstruct'"></EtfStockConstruct>
                    </el-tab-pane>

                    <el-tab-pane v-if="state.category ==='ETF'" label="基金构成" name="EtfConstruct">
                        <EtfConstruct v-if="activeName ==='EtfConstruct'"></EtfConstruct>
                    </el-tab-pane>

                    <el-tab-pane label="相关系数" name="StockCorr">
                        <StockCorr v-if="activeName ==='StockCorr'"></StockCorr>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import router from '../router'
import { weekStockSearch } from '../stores/week'
import { storeToRefs } from 'pinia';
import { getStockInfo } from '../service/stock';
import FinanceStat from './FinanceStat.vue';
import MonthStockDetail from './MonthStockDetail.vue'
import WeekStockDetail from './WeekStockDetail.vue';
import YearStockDetail from './YearStockDetail.vue';
import PeAndPbEchart from './PeAndPbEchart.vue';
import IndustryTag from './IndustryTag.vue';
import NorthBoundRatioEchart from './NorthBoundRatioEchart.vue';
import FundUnitsEchart from './FundUnitsEchart.vue';
import TradingRank from './TradingRank.vue';
import WeekStockGBSta from './gb/WeekStockGBSta.vue';
import MeanLineView from '../views/MeanLineView.vue';
import EtfConstruct from './EtfConstruct.vue';
import EtfStockConstruct from './EtfStockConstruct.vue';
import StockCorr from './StockCorr.vue';
import DailyConsecutive from './DailyConsecutive.vue';
import { useRouteQuery } from '../utils/useRoute';
import StockConsecutiveView from '../views/StockConsecutiveView.vue';


const stockSearchStore = weekStockSearch()
let { input } = storeToRefs(stockSearchStore)

const activeNameKey = "StockDetailActiveName"
const activeName = ref(sessionStorage.getItem(activeNameKey) || 'mean_line')

const visible = ref(false)
const state = reactive({
    stock: "",
    category:"指数",
    tradeCode:"",
    tags:[],
    industry:"",
    shareRate: 0,
    peRatio:10,
    marketCap:10,
    wg:10,
    introduce:""
})

let stock = useRouteQuery('stock',"")
if (stock) {
    state.stock = stock
    input.value = stock
}

const goBack = () => {
    router.push({path:'/'})
}

const loadData = () => {
    getStockInfo(input.value).then(res => {
        if (!res.data) {
            // 隐藏
            state.category = "指数"
            return
        }

        state.tradeCode = res.data.tradeCode.substr(0,6)
        state.shareRate = res.data.dividendYield
        state.category = res.data.category
        state.peRatio = res.data.peRatio
        state.pbRatio = res.data.pbRatio
        state.tags = res.data.tags
        state.wg = res.data.wg
        state.industry = res.data.industry
        state.dividendPayoutRatio = res.data.dividendPayoutRatio
        state.introduce = res.data.introduce
        state.controllingShareHolder = res.data.controllingShareHolder
        state.marketCap = res.data.marketCap

        document.title = "股票详情:" + res.data.stock;
    })
}

loadData()

// 只监听pinia中某一个值的变化
watch(() => input.value, (newValue, oldValue) => {
    state.stock = newValue
    loadData()
})
        
const change = (tabName) => {
    sessionStorage.setItem(activeNameKey, tabName)
    umami.track("StockDetailTabChange:" + tabName)
}
</script>

<style scoped>
.el-row {
    margin-bottom: 10px;
}
.el-text {
    margin-left: 20px;
}
.el-tabs {
    width: 100%;
}
</style>